import React, { useEffect, useState } from 'react';
import './PureStyles.css';

const GlowGradientButton = ({ effectOption = 'flicker', title = 'Hover me!', textColor = 'maroon' }) => {
	const [effect, setEffect] = useState(effectOption);
	const [buttonTitle, setButtonTitle] = useState(title);
	const [buttonTextColor, setButtonTextColor] = useState(textColor);

	useEffect(() => { 
		setEffect(effectOption);
		setButtonTitle(title);
		setButtonTextColor(textColor);
	}, [effectOption, title, textColor]);

	return (
		<main
			id='glow-gradient-button'
			className='dark'>
			<button data-effect={effect}>
				<span
					className='text'
					style={{ '--text-color': buttonTextColor }  as  React.CSSProperties}  >
					{buttonTitle}
				</span>
				<span className='shimmer'></span>
			</button>
		</main>
	);
};

export { GlowGradientButton  , GlowGradientButton as default } ;
